<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
      <h:form id="carForm">  
  
    <p:fieldset legend="Available Cars">  
        <p:dataTable id="availableCars" var="car" value="#{tableBean.carsSmall}">  
            <p:column style="width:20px">  
                <h:outputText id="dragIcon"  
                    styleClass="ui-icon ui-icon-arrow-4" />  
                <p:draggable for="dragIcon" revert="true" />  
            </p:column>  
  
            <p:column headerText="Model">  
                <h:outputText value="#{car.model}" />  
            </p:column>  
  
            <p:column headerText="Year">  
                <h:outputText value="#{car.year}" />  
            </p:column>  
  
            <p:column headerText="Manufacturer">  
                <h:outputText value="#{car.manufacturer}" />  
            </p:column>  
  
            <p:column headerText="Color">  
                <h:outputText value="#{car.color}" />  
            </p:column>  
        </p:dataTable>  
    </p:fieldset>  
  
    <p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px">  
        <p:outputPanel id="dropArea">  
            <h:outputText value="!!!Drop here!!!"  
                    rendered="#{empty tableBean.droppedCars}"  
                    style="font-size:24px;" />  
  
            <p:dataTable var="car" value="#{tableBean.droppedCars}"   
                    rendered="#{not empty tableBean.droppedCars}">  
  
                <p:column headerText="Model">  
                    <h:outputText value="#{car.model}" />  
                </p:column>  
  
                <p:column headerText="Year">  
                    <h:outputText value="#{car.year}" />  
                </p:column>  
  
                <p:column headerText="Manufacturer">  
                    <h:outputText value="#{car.manufacturer}" />  
                </p:column>  
  
                <p:column headerText="Color">  
                    <h:outputText value="#{car.color}" />  
                </p:column>  
  
                <p:column style="width:32px">  
                    <p:commandButton update=":carForm:display"  
                            oncomplete="carDialog.show()"  
                            icon="ui-icon-search">  
                        <f:setPropertyActionListener value="#{car}"  
                            target="#{tableBean.selectedCar}" />  
                    </p:commandButton>  
                </p:column>  
            </p:dataTable>  
        </p:outputPanel>  
    </p:fieldset>  
  
    <p:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop">  
        <p:ajax listener="#{tableBean.onCarDrop}" update="dropArea availableCars" />  
    </p:droppable>  
  
    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false"  
              width="200" showEffect="fade" hideEffect="fade" modal="true">  
  
        <h:panelGrid id="display" columns="2" cellpadding="4">  
  
            <f:facet name="header">  
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>  
            </f:facet>  
  
            <h:outputText value="Model:" />  
            <h:outputText value="#{tableBean.selectedCar.model}"/>  
  
            <h:outputText value="Year:" />  
            <h:outputText value="#{tableBean.selectedCar.year}"/>  
  
            <h:outputText value="Manufacturer:" />  
            <h:outputText value="#{tableBean.selectedCar.manufacturer}"/>  
  
            <h:outputText value="Color:" />  
            <h:outputText value="#{tableBean.selectedCar.color}"/>  
        </h:panelGrid>  
    </p:dialog>  
  
</h:form>             
      



    </h:body>
</html>

